<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>头部</title>
    <link href="/static/common/js/layui/css/layui.css" th:href="@{/common/js/layui/css/layui.css}" rel="stylesheet" media="all" />
    <link rel="stylesheet" href="../../../static/common/css/index/index.css" th:href="@{/common/css/index/index.css}">
    <link rel="stylesheet" href="../../../static/common/js/element-2/element.css" th:href="@{/common/js/element-2/element.css}">
    <script>
        var ctx = '[[@{/}]]';
    </script>
</head>
<body>
<div id="header">
    <header>
        <div class="header-div">
            <el-menu
                    :default-active="activeIndex"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    background-color="#5FB878"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                <el-menu-item index="1">处理中心</el-menu-item>
                <el-submenu index="2">
                    <template slot="title">我的工作台</template>
                    <el-menu-item index="2-1">选项1</el-menu-item>
                    <el-menu-item index="2-2">选项2</el-menu-item>
                    <el-menu-item index="2-3">选项3</el-menu-item>
                    <el-submenu index="2-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="2-4-1">选项1</el-menu-item>
                        <el-menu-item index="2-4-2">选项2</el-menu-item>
                        <el-menu-item index="2-4-3">选项3</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-menu-item index="3" disabled>消息中心</el-menu-item>
                <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
            </el-menu>
                <!--<ul class="layui-nav layui-bg-green" lay-filter="test" id="nav">-->
                    <!--<div class="leftLogo">-->
                        <!--<a class="logo" href="#"></a>-->
                        <!--<span style="color:yellow">莲花埃弗斯图片管理系统</span>-->
                    <!--</div>-->
                    <!--<div  class="topMenu">-->

                    <!--</div>-->
                    <!--<div class="rightLogin">-->
                        <!--<span style="margin-right: 20px;">莲花埃弗斯合集</span>-->
                        <!--<span v-if="curentLoginInfo">-->
                        <!--<span>{{curentLoginInfo.userName}}</span>-->
                            <!--|-->
                            <!--<a href="">退出</a>-->
                        <!--</span>-->
                        <!--<span v-else>-->
                            <!--|<a href="/zzh/login/loginIndex.html" class="" target="_top">登录</a>-->
                         <!--</span>-->
                    <!--</div>-->
                    <!--&lt;!&ndash; 天气信息 &ndash;&gt;-->
                    <!--<div class="weather" style="color:#fff;float:right;margin:-44px 0 0 0;">-->
                        <!--<div id="tp-weather-widget"></div>-->
                        <!--<script>(function (T, h, i, n, k, P, a, g, e) {-->
                            <!--g = function () {-->
                                <!--P = h.createElement(i);-->
                                <!--a = h.getElementsByTagName(i)[0];-->
                                <!--P.src = k;-->
                                <!--P.charset = "utf-8";-->
                                <!--P.async = 1;-->
                                <!--a.parentNode.insertBefore(P, a)-->
                            <!--};-->
                            <!--T["ThinkPageWeatherWidgetObject"] = n;-->
                            <!--T[n] || (T[n] = function () {-->
                                <!--(T[n].q = T[n].q || []).push(arguments)-->
                            <!--});-->
                            <!--T[n].l = +new Date();-->
                            <!--if (T.attachEvent) {-->
                                <!--T.attachEvent("onload", g)-->
                            <!--} else {-->
                                <!--T.addEventListener("load", g, false)-->
                            <!--}-->
                        <!--}(window, document, "script", "tpwidget", "//widget.seniverse.com/widget/chameleon.js"))</script>-->
                        <!--<script>tpwidget("init", {-->
                            <!--"flavor": "slim",-->
                            <!--"location": "WX4FBXXFKE4F",-->
                            <!--"geolocation": "enabled",-->
                            <!--"language": "zh-chs",-->
                            <!--"unit": "c",-->
                            <!--"theme": "chameleon",-->
                            <!--"container": "tp-weather-widget",-->
                            <!--"bubble": "disabled",-->
                            <!--"alarmType": "badge",-->
                            <!--"color": "#FFFFFF",-->
                            <!--"uid": "U9EC08A15F",-->
                            <!--"hash": "039da28f5581f4bcb5c799fb4cdfb673"-->
                        <!--});-->
                        <!--tpwidget("show");</script>-->
                    <!--</div>-->
                <!--</ul>-->
        </div>
    </header>
</div>
<script src="../../../static/common/css/font_1514218_0qs2i8pjuvs/iconfont.js" th:src="@{/common/css/font_1514218_0qs2i8pjuvs/iconfont.js}"></script>
<script src="../../../static/common/js/jquery/jquery.min.js" th:src="@{/common/js/jquery/jquery.min.js}"></script>
<script src="../../../static/common/js/vue/vue.js" th:src="@{/common/js/vue/vue.js}"></script>
<script src="../../../static/common/js/element-2/element.js" th:src="@{/common/js/element-2/element.js}"></script>
<!--<script src="../../../static/common/js/layui/layui.js" th:src="@{/common/js/layui/layui.js}"></script>-->
<script src="../../../static/common/js/layui/layui.all.js" th:src="@{/common/js/layui/layui.all.js}"></script>
<script src="../../../static/common/js/common/common.js" th:src="@{/common/js/common/common.js}"></script>
<script>
    // 导航菜单的间隔像素
    var menuCell = 5;
    layui.use('element', function () {
        var element = layui.element;
        var $ = layui.jquery;
        //获取所有的菜单
        request('',{
            type: "GET",
            url: "/common/json/header.json",
            dataType: "json",
        },function (res) {
            //重点地方，将Layui在页面加载时渲染出来的span.layui-nav-bar提前删除掉
            //因为在页面打开的时候进行了固定的渲染，然后通过重新加载不能够重置掉.layui-nav-bar，
            // 所以只能将带有这个class的内容全删除，让框架识别它是没渲染过的然后再通过方法重新渲染才能有效
            $("#nav").find('span.layui-nav-bar').remove();
            var data = res;
            console.log("头部导航栏"+data);
            var liStr = "";
            // 遍历生成主菜单
            for (var i = 0; i < data.length; i++) {
                // 判断是否存在子菜单
                if (data[i].childMenus != null && data[i].childMenus.length > 0) {
                    liStr += "<li class=\"layui-nav-item\"><a class=\"\" href=\"javascript:;\" data-src=\"" + data[i].url + "\" data-menuid=\"" + data[i].menuId + "\" data-title=\"" + data[i].name + "\"><svg class=\""+"icon"+"\"><use xlink:href=\"#"+data[i].pic+"\"></use></svg>" + data[i].name + "</a>\n" +
                        "<dl class=\"layui-nav-child\">\n";
                    // 遍历获取子菜单
                    for (var k = 0; k < data[i].childMenus.length; k++) {
                        liStr += getChildMenu(data[i].childMenus[k], 0);
                    }
                    liStr += "</dl></li>";
                } else {
                    if(data[i].name=='首页'){
                        liStr += "<li class=\"layui-nav-item layui-this\"><a class=\"site-demo-active\" data-src=\"" + data[i].url + "\" data-menuid=\"" + data[i].menuId + "\" data-title=\"" + data[i].name + "\"><svg class=\""+"icon"+"\"><use xlink:href=\"#"+data[i].pic+"\"></use></svg>" + data[i].name + "</a></li>";
                    }else{
                        liStr += "<li class=\"layui-nav-item\"><a class=\"site-demo-active\" data-src=\"" + data[i].url + "\" data-menuid=\"" + data[i].menuId + "\" data-title=\"" + data[i].name + "\"><svg class=\""+"icon"+"\"><use xlink:href=\"#"+data[i].pic+"\"></use></svg>" + data[i].name + "</a></li>";
                    }

                }
            };
            $(".topMenu").html(liStr);
            element.init();
        })
    });

    // 递归生成子菜单
    function getChildMenu(subMenu, num) {
        num++;
        var subStr = "";
        if (subMenu.childMenus != null && subMenu.childMenus.length > 0) {
            subStr += "<dd><ul><li class=\"layui-nav-item\" ><a style=\"margin-Left:" + num * menuCell + "px\" class=\"site-demo-actives\" href=\"javascript:;\" data-src=\"" + subMenu.url + "\" data-menuid=\"" + subMenu.menuId + "\" data-title=\"" + subMenu.name + "\">" + subMenu.name + "</a>" +
                "<dl class=\"layui-nav-child\">\n";
            for (var j = 0; j < subMenu.childMenus.length; j++) {
                subStr += getChildMenu(subMenu.childMenus[j], num);
            }
            subStr += "</dl></li></ul></dd>";
        } else {
            subStr += "<dd><a style=\"margin-Left:" + num * menuCell + "px\" class=\"site-demo-active\" data-src=\"" + subMenu.url + "\" data-menuid=\"" + subMenu.menuId + "\" data-title=\"" + subMenu.name + "\">" + subMenu.name + "</a></dd>";
        }
        return subStr;
    }
</script>
</body>
</html>